<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue-router</title>
	<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
	<div id="app2">
  <h1>vue-router 动态路由匹配demo </h1>
  <p style='color:red;'> 使用动态路由组件  可以watch监测组件实例属性的变幻   但是由于只有一个实例 也意味着组件的生命周期钩子不会再被调用。</p>
    <p>{{ message}}</p> 
   	<router-link to="/one/1">link-one</router-link> <!-- 路由调整 默认渲染成a标签 -->
   	<router-link to="/two/2">link-two</router-link>		<!-- 路由调整 默认渲染成a标签 -->
   	<router-link to="/three/3">link-three</router-link> <!-- 路由调整 默认渲染成a标签 -->
   	<router-link to="/four/4">link-four</router-link>		<!-- 路由调整 默认渲染成a标签 -->				
   	<router-link to="/five/5">link-five</router-link> <!-- 路由调整 默认渲染成a标签 -->
   	<router-link to="/six/6">link-six</router-link>		<!-- 路由调整 默认渲染成a标签 -->								
  <!-- 路由匹配到的组件将渲染在这里 -->
     <router-view></router-view>
</div>
</body>
<script>

var luyou2 = new VueRouter({
	routes : [
	  {
		path : "/:id/:number",  //匹配动态路径
		component : {  
			/*
			你可以在一个路由中设置多段『路径参数』，对应的值都会设置到 $route.params 中 
			 这个demo中 :id 与 :number的值已存进 $route.params 中  如{ id: 'one', number: 1 }
			*/
			template : "<p> {{ $route.params.id }}   {{ $route.params.number }}</p>",   //获取动态路径 视图里传过来的路径如 one/two  【$route.params.id】
			watch: {   // 当路径变化时  调转前触发的回调函数
			    $route : function (to, from) {
			        alert( "跳转前的路径" +  from.params.id + "/"+  from.params.number   + "。跳转后的路径" +  to.params.id + "/"+  to.params.number  );
			    }
			  }
		}
	  }       
	] 
});

new Vue({
	el :"#app2",
	router : luyou2,
	data : {
		message : "学习动态路由 不管你视图写了多少个路径 模型了只需要申明一个路由"
	}
	
});

</script>
</html>